import { IFormProps, size, formItemLayout, getUploadResult, getImages, getFileList } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select,Checkbox } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
import Uploads from '../Uploads';
export interface StoreEditProps extends FormComponentProps {
    visible: boolean,
    store?: api.SingleUserMallStoresVOStoreVO,
    onSave: (any) => void,
    onCancel: () => void,
    businessScope?: api.SingleUserMallItemsVOBusinessScopeVO,
    businessScopes: Array<api.SingleUserMallItemsVOBusinessScopeVO>,
}
class StoreEdit extends React.PureComponent<StoreEditProps, any>{
    constructor(props) {
        super(props);
    }

    state = {
        fileList: [],
        pictures: [],
    }

    componentDidMount() {
        const images = this.props.store && this.props.store.certImages;
        const pictures = this.props.store && this.props.store.picture;
        this.setState({ fileList: getFileList(images), pictures: getFileList(pictures) });
    }

    ok = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                form['certImages'] = getImages(this.state.fileList);
                form['picture'] = getImages(this.state.pictures);
                form['isInvalid'] = !form['isInvalid'];
                this.props.onSave(form);
            }
        });
    }

    cancel = () => {
        this.props.onCancel();
    }

    imageChange = (fileList) => {
        this.setState({ fileList });
    }

    pictureChange = (pictures) => {
        this.setState({ pictures });
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { store } = this.props;
        const { businessScopes } = this.props;
        return (
            <Modal
                title='店铺信息'
                visible={this.props.visible}
                onOk={this.ok}
                onCancel={this.cancel}
                maskClosable={true}
            >
                <Form>
                    <Form.Item label="店铺名称" {...formItemLayout}>
                        {getFieldDecorator('name', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入店铺名称'
                                }
                            ],
                            initialValue: store && store.name
                        })(<Input size={size}
                            placeholder="请输入店铺名称" />)}
                    </Form.Item>
                    <Form.Item label="图片" {...formItemLayout}>
                        {getFieldDecorator('picture', {
                            rules: [{
                                required: true,
                                message: '请上传店铺图片'
                            }
                            ],
                            initialValue: store && store.picture
                        })(
                            < Uploads editable={true} fileList={this.state.pictures} onChange={this.pictureChange} />)}
                    </Form.Item>
                    <Form.Item label="店铺描述" {...formItemLayout}>
                        {getFieldDecorator('discription', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入店铺描述'
                                }
                            ],
                            initialValue: store && store.discription
                        })(<Input size={size}
                            placeholder="请输入店铺描述" />)}
                    </Form.Item>
                    <Form.Item label="认证类型" {...formItemLayout}>
                        {getFieldDecorator('authType', {
                            initialValue: store && store.authType
                        })(<Input size={size}
                            placeholder="请输入认证类型" />)}
                    </Form.Item>
                    <Form.Item label="相关证件" {...formItemLayout}>
                        <Uploads editable={true} isList={true} fileList={this.state.fileList} onChange={this.imageChange} />
                    </Form.Item>
                    <Form.Item label="所属经营范围" {...formItemLayout}>
                        {getFieldDecorator('businessScopeId', {
                            initialValue: store && store.businessScopeId
                        })(<Select> 
                            {
                                businessScopes.map((item: api.SingleUserMallItemsVOBusinessScopeVO) => {
                                    return <Select.Option value={item.id}>{item.name}</Select.Option>
                                })
                            }
                        </Select>)}
                    </Form.Item>
                    <Form.Item label="客服电话"  {...formItemLayout}>
                        {getFieldDecorator('customerServicePhone', {
                              rules: [
                                {
                                    required: true,
                                    message: '请输入客服电话'
                                }
                            ],
                            initialValue: store && store.customerServicePhone
                        })(<Input size={size}
                            placeholder="请输入客服电话" />)}
                    </Form.Item>
                    <Form.Item label="店铺地址"  {...formItemLayout}>
                        {getFieldDecorator('storeAddress', {
                              rules: [
                                {
                                    required: true,
                                    message: '请输入店铺地址'
                                }
                            ],
                            initialValue: store && store.storeAddress

                        })(<Input size={size}
                            placeholder="请输入店铺地址" />)}
                    </Form.Item>
                    <Form.Item label="是否有效" {...formItemLayout}>
                        {getFieldDecorator('isInvalid', {
                            valuePropName: 'checked',
                            initialValue: store && !store.isInvalid
                        })(<Checkbox />)}
                    </Form.Item>
                </Form>
            </Modal>)
    }
}

export default Form.create()(StoreEdit);